<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>物流</title>
<link rel="stylesheet" type="text/css" href="css/map.css" />
<link rel="stylesheet" type="text/css" href="css/table.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=37uj0EGjKo9IGiiSo8rsgEwPBKubQw7G"></script>
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="com">
<div class="com__content">
	<section class="com__section">
		<div id="allmap"></div>
	</section>
	<section class="com__section com__section--text com__section--text-img">
		<div style="overflow-y:scroll;width:100%;">
			<table id="table" class="bordered">
				<thead>
					<tr>
						<th>终端标识</th>        
						<th>经度</th>
						<th>纬度</th>
						<th>温度</th>
						<th>震动X</th>        
						<th>震动Y</th>
						<th>震动Z</th>
						<th>电量</th>
						<th>报警标志</th>        
						<th>采集时间</th>
					</tr>
				</thead>
			</table>
		</div>
	</section>
</div>
<nav class="com__nav">
	<ul class="com__nav-list">
		<li class="com__nav-item">
			<a href="" class="com__nav-link flex-row">
				<div class="com__section-half">
					<span><h1>地图</h1></span>
					<span class="blue-line animate scaleInLeft delay-3"></span>
					<span class="white-line animate scaleInLeft delay-4"></span>
				</div>
				<div class="com__section-half">
					<span class="white-circle animate slideInRight delay-5"></span>
				</div>
			</a>
		</li>
		<li class="com__nav-item">
			<a href="" class="com__nav-link">
				<span><h1>数据</h1></span>
				<span class="blue-line animate scaleInLeft delay-2"></span>
				<span class="white-line animate scaleInLeft delay-4"></span>
				<span class="white-line animate scaleInLeft delay-5"></span>
			</a>
		</li>
	</ul>
</nav>
</div>
<script type="text/javascript" src="js/map.js"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var link = $('.com__nav-link');
var linkParent = link.parent('li');
var section = $('.com__section');
var sectionContent = section.find('*');
var switchTab = function () {
	var p = $(this).parent('li');
	var i = p.index();
	var s = section.eq(i);
	var c = s.find('*');
	section.removeClass('active');
	//sectionContent.removeAttr('style');
	s.addClass('active');
	c.css({
		transform: 'none',
		opacity: 1
	});
	linkParent.removeClass('active');
	p.addClass('active');
	return false;
};
link.on('click', switchTab);
function activeFirst() {
	section.first().addClass('active');
	section.first().find('*').css({
		transform: 'none',
		opacity: 1
	});
	linkParent.first().addClass('active');
}
activeFirst();
</script>

</body>
</html>